<template>
  <view class="container">
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="(item, index) in messageList" 
        :key="index"
        @tap="navigateToChat(item)"
      >
        <view class="avatar"></view>
        <view class="content">
          <view class="header">
            <text class="name">{{ item.name }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <view class="preview">
            <text class="text">{{ item.lastMessage }}</text>
            <view v-if="item.unread" class="badge">{{ item.unread }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          id: 1,
          name: '李四',
          lastMessage: '好的，我知道了',
          time: '14:30',
          unread: 2
        },
        {
          id: 2,
          name: '王五',
          lastMessage: '请问这个问题解决了吗？',
          time: '昨天',
          unread: 0
        },
        {
          id: 3,
          name: '赵六',
          lastMessage: '谢谢分享！',
          time: '星期一',
          unread: 1
        }
      ]
    }
  },
  methods: {
    navigateToChat(item) {
      uni.navigateTo({
        url: `/pages/message/chat?id=${item.id}&name=${item.name}`
      })
    }
  },
  onShow() {
    // TODO: 获取最新的消息列表
  },
  onPullDownRefresh() {
    // TODO: 实现下拉刷新
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
}
</script>

<style lang="scss">
@import '@/common/styles/common.scss';

.message-list {
  background: #FFFFFF;
  
  .message-item {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 2rpx solid $border-color;
    
    &:active {
      background-color: #f5f5f5;
    }
    
    .avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 48rpx;
      background-color: #eee;
      margin-right: 24rpx;
    }
    
    .content {
      flex: 1;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8rpx;
        
        .name {
          font-size: 32rpx;
          font-weight: 500;
        }
        
        .time {
          font-size: 24rpx;
          color: $text-color-secondary;
        }
      }
      
      .preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .text {
          font-size: 28rpx;
          color: $text-color-secondary;
          @include text-ellipsis;
          flex: 1;
          margin-right: 16rpx;
        }
        
        .badge {
          min-width: 36rpx;
          height: 36rpx;
          padding: 0 12rpx;
          background: $primary-color;
          border-radius: 18rpx;
          color: #FFFFFF;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style> 